<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String ctx = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + ctx + "/";
%>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/detail.css">
</head>

<body>
<header>
    <div class="logos">
        <h1>LOGO</h1>
    </div>
    <div class="sp-detail">

        <h1 style="font-weight: 400;">商品详情</h1>
        <div class="sp-photo">
            <div class="photo"><img src="${commodity.goodsImg}" style="margin:10px 60px;" width="600px" height="400px">
            </div>
            <div class="photo-detail">
                <div class="title">
                    <h2 style="font-weight: lighter;">${commodity.goodsName}</h2>
                </div>
                <div class="intro">${commodity.goodsIntroduce}</div>
                <div class="price">￥<p>${commodity.goodsPrice}</p>
                </div>
                <div class="chengse">成色：<p>${commodity.goodsCondition}</p>
                </div>
                <div class="fabuzhe">发布者：<p>${commodity.user.userName}</p>
                </div>
                <div class="buy" style="text-align: center;margin-left: 310px;">
                    <button>立即选购</button>
                </div>
                <div class="promise">服务承诺：<p>意外保修</p>&emsp;<p>正品保障</p>&emsp;<p>全面保修</p> &emsp;<p>急速退款</p> &emsp;<p>
                    延保服务</p>
                </div>
            </div>
        </div>
        <div class="comment">
            <h4>商品评价</h4>
            <c:forEach items="#{byGoodsId}" var="byGoodsId">
                <c:if test="${byGoodsId.commentState.code==2}">

                    <div class="box" style="display: flex;">
                        <p>${byGoodsId.user.userName}</p>
                        <p>${byGoodsId.commentContent}</p>
                    </div>
                </c:if>
            </c:forEach>

        </div>
    </div>
</header>

</body>
<style>
    .comment h4 {
        background-color: #F2F2F2;
        height: 40px;
        line-height: 40px;
        padding-left: 80px;
    }

    .comment .box,
    .box1 {
        padding: 0 80px;
        display: flex;
        min-height: 100px;
    }

    .box > div {
        flex: 1;
        width: fit-content;
        height: fit-content;
    }

    .box p {
        flex: 2;
        margin: auto;
        text-indent: 2em;
    }

    .box1 li:nth-child(1) {
        flex: 6;
    }

    .box1 li:nth-child(2) {
        flex: 1;
    }

    .box1 li p {
        display: inline;
    }
</style>

</html>